<template>
  <div class="zidongzhuadan">
    <el-dialog title="自动发货配置" center :visible.sync="show" :close-on-click-modal="false" width="900px">
      <div class="kflexc">
        <el-radio v-model="all.is_delivery" :label="1">开启自动发货</el-radio>
        <el-radio v-model="all.is_delivery" :label="0">关闭自动发货</el-radio>
        <el-radio v-model="all.is_delivery" :label="10">指定发货</el-radio>
      </div>
      <div v-if="all.is_delivery == 10" style="margin: 20px 0; color: rgb(49, 49, 49);">
        <div style="margin-bottom: 20px;">例外配置：关闭后下方添加的编码仍然可自动发货</div>
        <div style="border: 1px #eaeaea solid; border-radius: 10px;" class="kflex">
          <div style="border-right: 1px #eaeaea solid; flex: 1; padding: 20px;  height: 500px; overflow: auto;">
            <div style="margin-bottom: 20px; font-size: 16px;">请添加需要发货的商品</div>
            <div style="margin-bottom: 20px;">
              <el-input v-model="guanjianci" @input="ttt" placeholder="请输入商品名称或商品编码"></el-input>
            </div>
            <div class="kflex" v-for="(item,index) in weitianjia" :key="index" style="margin-bottom: 10px;">
              <div style="width: 150px;">{{item.title}}</div>
              <div style="width: 150px;">{{item.fetch_code}}</div>
              <div style="color: #005AFF; width: 60px; cursor: pointer;; text-align: right;" @click="tianjia(item,index)">添加</div>
            </div>
          </div>
          <div style="flex: 1; padding: 20px; margin-bottom: 10px;  height: 500px; overflow: auto;">
            <div style="margin-bottom: 20px; font-size: 16px;">已添加的商品</div>
            <div class="kflex" v-for="(item,index) in yitianjia" :key="index" style="margin-bottom: 10px;">
              <div style="width: 150px;">{{item.title}}</div>
              <div style="width: 150px;">{{item.fetch_code}}</div>
              <div style="color: #005AFF; width: 60px; cursor: pointer; text-align: right;" @click="shanchu(item,index)">删除</div>
            </div>
          </div>
        </div>
      </div>
    	<div slot="footer" class="dialog-footer">
    		<el-button type="info" round  @click="show = false">取消</el-button>
        <el-button type="danger" round  @click="queding">确定</el-button>
    	</div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: 'zidongzhuadan',
    props:['item'],
    data() {
      return {
        show:false,
        all:{
          is_delivery:"",
          id:""
        },
        weitianjia:[],
        yitianjia:[],
        list:[],
        guanjianci:""
      }
    },
    created() {

    },
    methods:{
      queding:function(){
        axios.post('/api/plan-market/shop/data/syn/set', {
            id: this.all.id,
            is_delivery: this.all.is_delivery,
          })
          .then(response => {
            if (response.data.msg.code == 0) {

              if(this.all.is_delivery == 10){
                let arr = []
                this.yitianjia.forEach(item=>{
                  arr.push(item.id)
                })
                axios.post('/api/plan-market/deliver/goods/config', {
                    store_id: this.all.id,
                    page_ids: arr,
                  })
                  .then(response => {
                    if (response.data.msg.code == 0) {
                      this.$message.success('操作成功');
                      this.show = false

                      this.$emit('zidongzhuadango')
                    } else {
                      this.$message.error(response.data.msg.info);
                    }
                  })
              }else{
                this.$message.success('操作成功');
                this.show = false
                this.$emit('zidongzhuadango')
              }

            } else {
              this.$message.error(response.data.msg.info);
            }

          })



      },
      ttt:function(){
        let arr = JSON.parse(JSON.stringify(this.list))

        this.weitianjia = arr.filter(item =>{
          return (item.title.includes(this.guanjianci) || item.fetch_code.includes(this.guanjianci))
        })


      },
      tianjia:function(item,index){
        this.weitianjia.splice(index,1)

        this.list.forEach((item2,index2)=>{
          if(item2.id == item.id){
            this.list.splice(index2,1)
          }
        })



        this.yitianjia.push(item)
      },
      shanchu:function(item,index){
        this.yitianjia.splice(index,1)
        this.weitianjia.push(item)
        this.list.push(item)
      },
      chushihua:function(){

        this.all = {
          is_delivery:this.item.is_delivery,
          id:this.item.id
        }

        axios.get('/api/gth/order-pages2?status=100&_page=1&_page_size=2000')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.weitianjia = response.data.data.data

              if(this.all.is_delivery == 10){
                axios.get('/api/plan-market/deliver/goods/list?store_id='+this.all.id)
                  .then(response => {
                    if (response.data.msg.code == 0) {
                      if(response.data.data && response.data.data.length > 0){
                        response.data.data.forEach((item,index)=>{
                          this.list.forEach((item2,index2)=>{
                            if(item2.id == item.id){
                              this.list.splice(index2,1)
                              this.weitianjia.splice(index2,1)
                              this.yitianjia.push(item2)
                            }
                          })
                        })
                      }
                    } else {
                      this.$message.error(response.data.msg.info);
                    }
                  })
              }


            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        // this.weitianjia = JSON.parse(JSON.stringify(this.list))
        this.yitianjia = []
        this.show = true
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
